説明 バグレポート

flutterインスペクタの使用

それは何ですか？

Flutter ウィジェット インスペクターは、視覚化と分析を行うための強力なツールです。 Flutter ウィジェット ツリーを探索します。 Flutter フレームワークはウィジェットを使用します としてコア構成要素コントロールから何でも (テキスト、ボタン、トグルなど)、 レイアウト (センタリング、パディング、行、列など) に設定します。 インスペクターは、Flutter ウィジェットの視覚化と探索に役立ちます ツリーを作成し、次の用途に使用できます。

• 既存のレイアウトを理解する
• レイアウトの問題を診断する

始めましょう

レイアウトの問題をデバッグするには、アプリを次の場所で実行します。デバッグモードと をクリックしてインスペクタを開きます flutterインスペクターDevTools ツールバーのタブ。

レイアウトの問題を視覚的にデバッグする

以下は、で利用可能な機能のガイドです。 インスペクタのツールバー。スペースが限られている場合、アイコンは ラベルのビジュアルバージョンとして使用されます。

ウィジェットモードを選択します

選択するにはこのボタンを有効にします デバイス上のウィジェットを使用して検査します。詳細については、 見るウィジェットの検査。

ツリーを更新

現在のウィジェット情報を再読み込みします。

遅いアニメーション

アニメーションを 5 倍遅く実行して、微調整しやすくします。

ガイドラインを表示する

レイアウトの問題の修正に役立つオーバーレイのガイドライン。

ベースラインを表示

テキストの位置を揃えるために使用されるベースラインを表示します。 テキストが揃っているかどうかを確認するのに役立ちます。

ハイライト再ペイント

要素が再描画されるときに色が変わる境界線を表示します。 不要な再ペイントを見つけるのに役立ちます。

特大の画像を強調表示する

メモリを過剰に使用している画像を強調表示します 色を反転して反転することによって。

ウィジェットの検査

インタラクティブなウィジェット ツリーを参照して、近くにあるものを表示できます ウィジェットを選択し、そのフィールド値を確認します。

ウィジェット ツリー内の個々の UI 要素を見つけるには、 クリックウィジェットモードの選択ツールバーのボタン。 これにより、デバイス上のアプリが「ウィジェット選択」モードになります。 アプリの UI で任意のウィジェットをクリックします。これにより、ウィジェットが選択されます アプリの画面に移動し、ウィジェット ツリーを対応するノードまでスクロールします。 を切り替えますウィジェットモードの選択もう一度ボタンを押して終了します ウィジェット選択モード。

レイアウトの問題をデバッグする場合、注目すべき重要なフィールドは次のとおりです。sizeとCD4BCBA7-E5D6-4450-97D0-BF861319A6F8田畑。制約はツリーの下に流れていきます。 そしてサイズは元に戻ります。この仕組みの詳細については、 見る制約を理解する。

flutter レイアウト エクスプローラー

Flutter Layout Explorer は理解を深めるのに役立ちます flutterレイアウト。

このツールでできることの概要については、次を参照してください。 Flutter Explorer ビデオ:

次のステップバイステップの記事も役立つかもしれません。

• Flutter Inspector を使用してレイアウトの問題をデバッグする方法

レイアウト エクスプローラーの使用

Flutter インスペクターからウィジェットを選択します。レイアウトエクスプローラー 両方をサポートしますフレックスレイアウト固定サイズのレイアウト、および 両方の種類に特有のツール。

フレックスレイアウト

フレックス ウィジェットを選択すると (たとえば、Row、Column、Flex) またはフレックス ウィジェットの直接の子である場合、フレックス レイアウト ツールは レイアウトエクスプローラーに表示されます。

Layout Explorer は、その方法を視覚化します。Flexウィジェットとその 子供たちが並べられています。探索者は主軸を特定します と交差軸、およびそれぞれの現在の位置合わせ (たとえば、start、end、spaceBetween)。 フレックスファクター、フレックスフィット、レイアウトなどの詳細も表示されます。 制約。

さらに、エクスプローラーにはレイアウト制約違反が表示されます オーバーフローエラーをレンダリングします。レイアウト制約の違反 は赤色で表示され、オーバーフロー エラーは ランニング中に見られるような標準的な「黄色のテープ」パターン デバイス。これらの視覚化は、以下の理解を向上させることを目的としています。 オーバーフロー エラーが発生する理由とその修正方法。

レイアウト エクスプローラーでウィジェットをクリックするとミラーリングされます オンデバイスインスペクタでの選択。ウィジェットモードの選択これを有効にする必要があります。それを有効にするには、 クリックしてくださいウィジェットモードの選択インスペクターのボタンをクリックします。

フレックスファクター、フレックスフィット、アライメントなどの一部のプロパティでは、 エクスプローラーのドロップダウン リストを使用して値を変更できます。 ウィジェットのプロパティを変更すると、新しい値が反映されます。 レイアウト エクスプローラーだけでなく、 Flutter アプリを実行しているデバイス。探検家がアニメーション化する 変更の影響が明確になるように、プロパティの変更を反映します。 レイアウト エクスプローラーから行われたウィジェット プロパティの変更は、 ソース コードを変更すると、ホット リロード時に元に戻されます。

インタラクティブなプロパティ

Layout Explorer は変更をサポートしますmainAxisAlignment、crossAxisAlignment、 とFlexParentData.flex。 将来的には、追加のプロパティのサポートを追加する可能性があります そのようなmainAxisSize、textDirection、 とFlexParentData.fit。

mainAxisAlignment

サポートされている値:

• MainAxisAlignment.start
• MainAxisAlignment.end
• MainAxisAlignment.center
• MainAxisAlignment.spaceBetween
• MainAxisAlignment.spaceAround
• MainAxisAlignment.spaceEvenly

交差軸の位置合わせ

サポートされている値:

• CrossAxisAlignment.start
• CrossAxisAlignment.center
• CrossAxisAlignment.end
• CrossAxisAlignment.stretch

FlexParentData.flex

Layout Explorer は UI で 7 つのフレックス オプションをサポートします (null、0、1、2、3、4、5)、ただし技術的にはフレックス フレックス ウィジェットの子の要素は任意の int にすることができます。

柔軟なフィット感

Layout Explorer は 2 つの異なるタイプをサポートします。FlexFit:looseとtight。

固定サイズのレイアウト

子ではない固定サイズのウィジェットを選択した場合 フレックスウィジェットの場合、固定サイズのレイアウト情報が表示されます レイアウトエクスプローラーで。サイズ、制約、パディングを確認できます 選択したウィジェットとその最も近い上流の両方の情報 レンダーオブジェクト。

ビジュアルデバッグ

Flutter Inspector には、アプリを視覚的にデバッグするためのいくつかのオプションが用意されています。

遅いアニメーション

このオプションを有効にすると、視覚的にわかりやすくするためにアニメーションが 5 倍遅く実行されます。 検査。 これは、アニメーションを注意深く観察して微調整したい場合に便利です。 あまり正しくないようです。

これはコードでも設定できます。

import 'package:flutter/scheduler.dart';

void setSlowAnimations() {
  timeDilation = 5.0;
}

これにより、アニメーションが 5 倍遅くなります。

こちらも参照

詳細については、次のリンクを参照してください。

• Flutter ドキュメント: timeDilation プロパティ

次の画面録画は、アニメーションを遅くする前と後を示しています。

ガイドラインを表示する

この機能は、レンダー ボックス、配置、 パディング、スクロールビュー、クリッピング、スペーサー。

このツールは、レイアウトをより深く理解するために使用できます。例えば、 不要なパディングを見つけたり、ウィジェットの配置を理解したりすることによって。

これをコードで有効にすることもできます。

import 'package:flutter/rendering.dart';

void showLayoutGuidelines() {
  debugPaintSizeEnabled = true;
}

レンダーボックス

画面に描画するウィジェットは、レンダーボックス、 Flutter レイアウトの構成要素。明るい青色の枠線で表示されます。

アライメント

配置は黄色の矢印で示されます。これらの矢印は垂直方向を示しています および親を基準としたウィジェットの水平オフセット。 たとえば、このボタンのアイコンは、中央に 4 つの矢印が配置されているように表示されます。

パディング

パディングは半透明の青色の背景で表示されます。

スクロールビュー

スクロールするコンテンツ (リスト ビューなど) を含むウィジェットは、緑色の矢印で表示されます。

クリッピング

クリッピング、たとえば、ClipRect ウィジェット、 示されています ピンクの破線とハサミのアイコン:

スペーサー

スペーサー ウィジェットは灰色の背景で表示されます。 このようなSizedBox子供なし:

ベースラインを表示

このオプションにより、すべてのベースラインが表示されます。 ベースラインは、テキストを配置するために使用される水平線です。

これは、テキストが垂直方向に正確に配置されているかどうかを確認するのに役立ちます。 たとえば、次のスクリーンショットのテキストのベースラインはわずかにずれています。

のベースラインウィジェットを使用してベースラインを調整できます。

どれにも線が引かれますレンダーボックスベースラインが設定されている。 アルファベットのベースラインは緑色、表意文字は黄色で表示されます。

これをコードで有効にすることもできます。

import 'package:flutter/rendering.dart';

void showBaselines() {
  debugPaintBaselinesEnabled = true;
}

ハイライト再ペイント

このオプションは、すべての周りに境界線を描きます。レンダーボックスボックスが再描画されるたびに色が変わります。

この回転する色の虹は、アプリの一部を見つけるのに役立ちます 再描画が多すぎるため、パフォーマンスに悪影響を及ぼす可能性があります。

たとえば、1 つの小さなアニメーションがページ全体を引き起こす可能性があります。 すべてのフレームに再ペイントします。 アニメーションをラップする境界線の再描画ウィジェット限界 アニメーションのみに再描画します。

ここでは、進行状況インジケーターによってコンテナーが再描画されます。

class EverythingRepaintsPage extends StatelessWidget {
  const EverythingRepaintsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

進行状況インジケーターをラップするRepaintBoundary原因 画面のそのセクションのみを再描画します。

class AreaRepaintsPage extends StatelessWidget {
  const AreaRepaintsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(
        child: RepaintBoundary(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

RepaintBoundaryウィジェットにはトレードオフがあります。彼らはパフォーマンスを助けることができますが、 ただし、新しいキャンバスを作成するオーバーヘッドもあります。 追加のメモリを使用します。

コード内でこのオプションを有効にすることもできます。

import 'package:flutter/rendering.dart';

void highlightRepaints() {
  debugRepaintRainbowEnabled = true;
}

特大の画像を強調表示する

このオプションは、色を反転することで大きすぎる画像を強調表示します。 そしてそれらを垂直方向に反転します。

ハイライトされた画像は必要以上に多くのメモリを使用します。 たとえば、5MB の大きな画像を 100 × 100 ピクセルで表示します。

このような画像は、特にローエンドのデバイスでパフォーマンスの低下を引き起こす可能性があります リストビューのように多数の画像がある場合、 このパフォーマンスへの影響が積み重なる可能性があります。 各イメージに関する情報がデバッグ コンソールに出力されます。

dash.png has a display size of 213×392 but a decode size of 2130×392, which uses an additional 2542KB.

画像が必要以上に 128KB 以上使用する場合、画像は大きすぎるとみなされます。

画像を固定する

可能な限り、この問題を解決する最善の方法はサイズを変更することです 画像アセット ファイルを小さくするためです。

これが不可能な場合は、cacheHeightとcacheWidthのパラメータImageコンストラクタ：

class ResizedImage extends StatelessWidget {
  const ResizedImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'dash.png',
      cacheHeight: 213,
      cacheWidth: 392,
    );
  }
}

これにより、エンジンはこの画像を指定されたサイズでデコードします。 メモリ使用量を削減します (デコードとストレージは依然として高価です) 画像アセット自体が縮小される場合よりも)。 画像はレイアウトまたは幅と高さの制約に従ってレンダリングされます これらのパラメータに関係なく。

このプロパティはコードでも設定できます。

void showOversizedImages() {
  debugInvertOversizedImages = true;
}

詳しくは

詳細については、次のリンクをご覧ください。

• Flutter ドキュメント: debugInvertOversizeImages

詳細ツリー

を選択ウィジェットの詳細ツリータブをクリックして、 選択したウィジェット。ここから、に関する有益な情報を収集できます。 ウィジェットのプロパティ、レンダリング オブジェクト、および子。

ウィジェットの作成を追跡する

Flutter インスペクタの機能の一部は、以下に基づいています。 より深く理解するためにアプリケーションコードをインストルメント化する ウィジェットが作成されるソースの場所。起源 インスツルメンテーションにより、Flutter インスペクターが UI の定義方法と同様の方法でウィジェット ツリーを作成する ソースコード内で。これがないと、ノードのツリーは ウィジェット ツリーははるかに深いため、より困難になる可能性があります。 ランタイムウィジェット階層がどのように対応するかを理解する あなたの申請'■ UI。

この機能を無効にするには、次のコマンドを渡します。--no-track-widget-creationに のflutter run指図。

ウィジェット ツリーがどのようになるかの例を次に示します。 トラック ウィジェットの作成が有効な場合と有効でない場合。

トラック ウィジェットの作成が有効 (デフォルト):

トラック ウィジェットの作成が無効になっています (推奨されません):

この機能により、その他の点では同一ではないことが防止されます。constからのウィジェット デバッグ ビルドでは同等とみなされます。詳細については、を参照してください。 についての議論デバッグ時の一般的な問題。

その他のリソース

インスペクターで一般的に何ができるかをデモンストレーションするには、 を参照してくださいDartConf 2018 トークIntelliJ バージョンのデモ Flutter インスペクタの。

レイアウトの問題を視覚的にデバッグする方法を学ぶには DevTools を使用して、ガイド付きのガイドを確認してくださいFlutter インスペクターのチュートリアル。